<template>
  <h4 class="title_lv2">input输入框</h4>
  <div class="statement">
    <div class="ol-li">
      <div>1、不做任何处理</div>
      <el-input class="qf_input" style="width: 500px" v-model="input" placeholder="Please input" />
    </div>

    <div class="ol-li">
      <div>2、格式化使用formatter显示值</div>
      <el-input
      class="qf_input"
      style="width: 500px"
        v-model="input"
        placeholder="Please input"
        :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
        :parser="value => value.replace(/\$\s?|(,*)/g, '')"
      />
      <div class="imp_txt">:formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"</div>
       
      <div class="imp_txt">:parser="value => value.replace(/\$\s?|(,*)/g, '')"</div>
    </div>

    <div class="ol-li">
      <div>3、带有左侧或者右侧的的输入框</div>
      <el-input class="qf_input" style="width: 500px" v-model="input" placeholder="请输入">
        <template #suffix>
          <el-icon class="el-input__icon"><calendar /></el-icon>
        </template>
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
     <div>
      <el-input class="qf_input" v-model="input" placeholder="请输入"  style="width: 500px">
        <template #prepend>Http://</template>
        <template #append>.com</template>
      </el-input>
     </div>
      <el-input class="qf_input" v-model="input" placeholder="请输入"  style="width: 500px">
        <template #prepend>
          <el-select v-model="select" placeholder="Select" style="width: 115px">
            <el-option label="Restaurant" value="1" />
            <el-option label="Order No." value="2" />
            <el-option label="Tel" value="3" />
          </el-select>
        </template>
        <template #append>
          <el-select v-model="select" placeholder="Select" style="width: 115px">
            <el-option label="Restaurant" value="1" />
            <el-option label="Order No." value="2" />
            <el-option label="Tel" value="3" />
          </el-select>
        </template>
      </el-input>
      <div   class="imp_txt">引用具名插槽，左侧使用“#suffix”，右侧使用“#prefix”</div>
    </div>
    <div class="ol-li">
        <div>4、只允许数字验证</div>
        <el-input v-number:2=3   class="qf_input" style="width: 500px" v-model="inputNum" placeholder="Please input" />
      </div>
    <!-- 页面代码 源码 -->
    <dropWrap key="oreo">
      <pre><code class="language-js">{{ htm2 }} </code></pre>
    </dropWrap>
    <!-- 页面代码 源码 -->
  </div>
  <div class="hr das"></div>
  <h4 class="title_lv2">textare输入框</h4>
  <div class="statement">
    <div class="ol-li">
      <span>1、设置<span class="imp_txt">type="textarea"</span></span>
      <el-input class="qf_input" v-model="textarea" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
      maxlength="30" show-word-limit placeholder="Please input" />
    </div>
 
    <!-- 页面代码 源码 -->
    <dropWrap key="oreo">
      <pre><code class="language-js">{{ htm23 }} </code></pre>
    </dropWrap>
    <!-- 页面代码 源码 -->
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import dropWrap from "../../dropWrap.vue";
/*  生命周期*/
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
let htm2 = ref<string>(`
    3） 引用具名插槽，左侧使用"#suffix"，右侧使用"#prefix"，可替换左侧或者右侧文字信息
    4)input只允许输入数字    
    v-number 限制整数，v-number:2 限制两位小数，v-number:2=3 限制两位小数，整数位三位，v-number=2 限制两位整数\
        `);

let htm23 = ref<string>(`
   1) 
   设置type类型为"textarea"，"minRows"最小行数,"maxRows"最大行数
   "show-word-limit" 显示剩余数字,"maxlength"、"minlength"控制最大字数和最小字数

   <el-input v-model="textarea" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
   show-word-limit maxlength="30" placeholder="Please input" />
      
        `);
const input = ref("");
const inputNum=ref("")
const textarea = ref("");
const select = ref("");


</script>

<style lang="scss">
.statement .ol-li {
  font-size: 14px;
  padding-bottom: 20px;
  /* display: flex;
        align-items: center; */
}
.imp_txt {
  /* background-color:$primary-color; */
  /* color:#ffffff; */
  color: $primary-color;
  padding: 3px 5px;
    border-radius: 2px;
    margin: 5px 2px;
}
</style>
